<template>
    <div>
        
        <show-names :names="names">
            <!-- slotProps取到的就是ShowNames组件里动态绑定传过来的item, index -->
            <template v-slot="slotProps">
                <button>{{slotProps.item}}-{{slotProps.index}}</button>
            </template>
        </show-names>

        <!-- 独占默认插槽的缩写 -->
        <show-names :names="names" v-slot="slotProps">
            <!-- slotProps取到的就是ShowNames组件里动态绑定传过来的item, index -->
            
                <strong>{{slotProps.item}}-{{slotProps.index}}</strong>
            
        </show-names>
    </div>
</template>

<script>
    import ChildCpn from './ChildCpn.vue';
    import ShowNames from './ShowNames.vue';

    export default {
        components: {
            ChildCpn,
            ShowNames
        },
        data() {
            return {
                names: ['why', 'leon', 'kobe', 'james']
            }
        }
    }
</script>

<style scoped>

</style>